<template>
	<view class="content">
		<swiper class="swiper_box" @change="change" :autoplay="true" :interval="3000" :indicator-dots="false">
			<swiper-item v-for="(item ,index) in swiperList" :key="index">
				<image :src="item.url" mode="" class="swiper_item" v-if="item.imageType == 'image'"></image>
				<video :src="item.url" class="swiper_item" v-if="item.imageType == 'video'"></video>
			</swiper-item>
		</swiper>
		<view class="dot_box" v-if="swiperList.length>0">
			{{swiperDotIndex +1}}/{{swiperList.length}}
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const porps = defineProps({
		swiperList:{type:Array,default:()=>[]}
	})
	const swiperDotIndex =ref(0)
	// 轮播图改变事件
	const change = (e) => {
		swiperDotIndex.value = e.detail.current;
	}
</script>

<style lang="less" scoped>
	.content {
		position: relative;
	
		.swiper_box {
			height: 797rpx;
			// border: 1rpx solid red;
		}
	
		.swiper_item {
			width: 100%;
			height: 797rpx;
		}
	
		.dot_box {
			position: absolute;
			bottom: 80rpx;
			right: 32rpx;
			opacity: 0.5;
			background: #000000;
			border-radius: 30px;
	
			width: 100rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-family: PingFangSC-Regular;
			font-size: 26rpx;
			color: #FFFFFF;
			font-weight: 400;
		}
	
		.goback {
			position: absolute;
			left: 24rpx;
			top: 0rpx;
			width: 60rpx;
			height: 60rpx;
			z-index: 10000;
		}
	}
	
</style>